<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>列表过滤</title>

  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
  <input type="text" placeholder="请输入名字" v-model="keyword">
  <input type="submit" value="年龄升序" @click="sortType=2">
  <input type="submit" value="年龄降序"@click="sortType=1">
  <input type="submit" value="原顺序"@click="sortType=0">
  <ul>
    <li v-for="(p,index) in filePersons" :key="p.id">
      {{p.name}}-{{p.age}}-{{p.sex}}
    </li>
  </ul>
</div>
</body>
<script>
  //用computed实现
  new Vue({
    el: "#root",
    data() {
      return {
        keyword: '',
        persons: [
          {id: '001', name: '马冬梅', age: '18', sex: '女'},
          {id: '002', name: '周冬雨', age: '19', sex: '女'},
          {id: '003', name: '周杰伦', age: '21', sex: '男'},
          {id: '004', name: '温兆伦', age: '20', sex: '男'},
        ],
        sortType:0,//0原顺序 1降序 2升序
      }
    },
    computed: {
      filePersons() {
         const arr=this.persons.filter((f) => {
          return f.name.indexOf(this.keyword) != -1;
        })
        if (this.sortType>0){
          arr.sort((p1,p2)=>{
            return this.sortType==1?p2.age-p1.age:p1.age-p2.age;
          })
        }
        return arr;
      },
    }
  });
</script>
</html>
